<template>
  <!-- 货位监控 -->
  <div id="snap-svg" v-visibility-change="change" style="padding: 0; margin: 0; height: 100vh; width: 100%; overflow: hidden">

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" @close="closeDialog">
      <template v-if="dialogOption < 2">
        <el-button size="mini" type="success" @click="operateRun(dialogTitle)">运行</el-button>
        <el-button size="mini" type="primary" @click="operateStop(dialogTitle)">停止</el-button>
        <el-button size="mini" type="danger" @click="operateRelieve(dialogTitle)">解除异常</el-button>
        <el-button size="mini" type="info" @click="operateDetails(dialogTitle)">详情</el-button>
        <el-button v-if="errorCode > 0 && errorCode < 3" size="mini" type="danger" @click="operateEmpty(dialogTitle)">处理空取</el-button>
        <el-button v-if="errorCode > 2 " size="mini" type="danger" @click="operateDouble(dialogTitle)">处理二重</el-button>
        <el-button size="mini" type="danger" v-show="disableClickShow" @click="disableClick">禁用-未完成</el-button>
      </template>
      <template v-if="dialogOption === 2">
        <el-button size="mini" type="primary" @click="isBoundClick">出库模式</el-button>
        <el-button size="mini" type="primary" @click="isBoundClick">入库模式</el-button>
        <h4 v-for="(item,key) in IOPortData" :key="item.name">{{ key }} ： {{ item }}</h4>
      </template>
      <div v-if="particularsclick" style="margin-top: 20px">
        <p v-for="(item, key, index) in particularsData" :key="index" style="font-size: 16px; text-align: left">
          <span style="width: 150px; display: inline-block">{{ key }}</span> :
          <span style="margin-left: 30px; width: 100px; display: inline-block">{{ item }}</span>
        </p>
      </div>
    </el-dialog>

    <!-- 是否锁定的dialog -->
    <el-dialog :visible.sync="locdialog" @closed="closelocdialog">
      <el-form :model="locdialogData" label-width="160px" size="mini" style="text-align: center">
        <el-form-item label="货架名称">
          <span>{{ locdialogData.name }}</span>
        </el-form-item>
        <el-form-item label="是否锁定">
          <el-switch v-model="locdialogData.isLock" active-text="锁定" inactive-text="解锁" @change="changeIslock">锁定</el-switch>
        </el-form-item>
        <el-form-item label="货位类型">
          <span>{{ locdialogData.locType }}</span>
        </el-form-item>
        <el-form-item label="货位状态">
          <span>{{ locdialogData.state }}</span>
        </el-form-item>
        <el-form-item label="托盘号">
          <span>{{ locdialogData.unitId }}</span> <el-button v-if="locdialogData.unitId" @click="unitIdCheckClick">盘点</el-button>
        </el-form-item>
        <el-form-item label="基准货架">
          <el-switch v-model="locdialogData.basicShelf" active-text="是" inactive-text="否" @change="changeBasicShelf">锁定</el-switch>
        </el-form-item>
        <el-form-item label="区域">
          <span>{{ locdialogData.zoneName }}</span>
        </el-form-item>
        <el-form-item label="备注">
          <span v-show="isedit">{{ locdialogData.remark }}</span>
          <el-input style="width: 80%" v-model="remarkData" v-show="!isedit" :placeholder="locdialogData.remark"></el-input>
          <el-button v-show="isedit" type="text" @click="EditRemark">编辑</el-button>
          <el-button v-show="!isedit" type="text" @click="submitRemark">提交</el-button>
        </el-form-item>
        <el-button @click="destinationClick(locdialogData.name)">目的地</el-button>
      </el-form>
    </el-dialog>
    <!--备注的dialog  -->
    <el-dialog :visible.sync="dialogRemark" @close="dialogRemarkCancel">
      <el-input v-model="remarkData" placeholder="请输入备注"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogRemarkConfirm">确 定</el-button>
        <el-button @click="dialogRemarkCancel">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 输入目的点的dialog -->
    <el-dialog :visible.sync="destinationDialog">
      <span>起始点:{{ LocStart }}</span> --
      <el-input style="width: 60%" v-model.trim="toLoc" placeholder="请输入目的点" />
      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="comfirmToLoc">确 定</el-button>
        <el-button @click="destinationDialog = false">取 消</el-button> -->
      </span>
    </el-dialog>
    <svg id="svg" />

    <!-- 下方功能按钮 -->
    <div id="card">
      <el-row>
        <el-col :span="5" style="text-align: center">
          <el-tooltip content="复位">
            <el-button class="iconfont el-icon-aim" type="text" color="black" @click.native="handleReset" />
          </el-tooltip>
        </el-col>
        <el-col :span="5" style="text-align: center">
          <el-tooltip content="图例">
            <el-popover placement="bottom" trigger="click">
              <img src="@/assets/images/tips.png" style="width:150px" alt="">
              <el-button slot="reference" type="text" class="el-icon-info" />
            </el-popover>
          </el-tooltip>
        </el-col>
        <el-col :span="5" style="text-align: center">
          <el-tooltip :content="isfull ? '退出全屏' : '全屏'">
            <el-button type="text" :class="isfull ? 'iconfont el-icon-tuichuquanping' : 'iconfont el-icon-quanping'" color="black" @click.native="handleChange" />
          </el-tooltip>
        </el-col>
        <el-col :span="5">
          <el-button @click="checkClick">盘点</el-button>
        </el-col>
      </el-row>
      <el-dialog title="盘点" :visible.sync="CheckDialog" width="500px" :modal-append-to-body='false'>
        <el-radio-group v-model="radio">
          <el-radio :label="1">指定货架</el-radio>
          <el-radio :label="2">指定Srm</el-radio>
          <el-radio :label="3">指定区域</el-radio>
        </el-radio-group>
        <el-form ref="checkRef" :model="checkData" size="mini">
          <el-form-item v-show="radio === 1" label="指定货架：">
            <el-cascader v-model="checkData.shelf" placeholder="请选择货架" style="width:100%" :options="LocationCascader"></el-cascader>
          </el-form-item>
          <el-form-item v-show="radio === 2" label="指定Srm：">
            <el-select v-model="checkData.srm" @change="taskTypeChange" style="width:100%" placeholder="请选择指定Srm">
              <el-option label="CJSTW100_C1" value="CJSTW100_C1" />
              <el-option label="CJSTW100_C2" value="CJSTW100_C2" />
              <el-option label="CJSTW200_C1" value="CJSTW200_C1" />
              <el-option label="CJSTW200_C2" value="CJSTW200_C2" />
            </el-select>
          </el-form-item>
          <el-form-item v-show="radio === 3" label="指定区域：">
            <el-select v-model="checkData.taskType" @change="taskTypeChange" style="width:100%" placeholder="请选择指定区域">
              <el-option v-for="item in mainTaskTypes" :key="item.value" :label="item.lable" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="CheckDialog = false">创 建</el-button>
          <el-button @click="CheckDialog = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
const signalR = require("@microsoft/signalr");
import {
  InitSvg,
  HandleSingalRData,
  getsingalRData,
  HandleShelfChanged,
} from "./SvgLayout.js";
import {
  GetDeviceDataApi,
  HandleDeviceOperate,
  UpdateConfigValueApi,
  QueryConfigValue,
} from "@/api/dashboard";
import {
  GetLocSizeApi,
  GetAllLocInfoApi,
  UpdateWcsLockApi,
  UpdateWcsLocationBasicShelfApi,
} from "@/api/LocInnerManageApi";
import { updateSubDateApi } from "@/api/task.js";
import { Message } from "element-ui";
import Snap from "snapsvg-cjs";
import { zpd } from "snap.svg.zpd";
import { GetLocationCascaderapi } from "@/api/task";
export default {
  name: "LocMonitor",

  data() {
    return {
      dialogTitle: "",
      /** 是否显示空取 或者二重按钮 */
      errorCode: 0,
      dialogOption: 0, // 0：输送机，1：堆垛机，2：灯
      /** 详情数据 */
      particularsData: {
        name: "",
        obj: "",
      },
      // MES是否在线
      MESIsonline: true,
      // 点击的灯的数据
      IOPortData: "",
      //禁用按钮
      disableClickShow: false,
      isfull: false,
      // svg的大小
      svglength: 30,
      // svg的边距
      svgmargin: 5,
      // 起始点
      LocStart: "",
      //目的点：
      toLoc: "",
      srmName: "",
      /** 是否点击了详情 */
      particularsclick: false,
      //目的点dialog
      destinationDialog: false,
      //输送机的dialog
      dialogVisible: false,
      // 输送机数据
      bindSingalRSrm: [],
      locInfos: [],
      isComlpeted: false,
      // 字典
      dic: [
        { key: "Empty", color: "#909399" },
        { key: "Store", color: "#909399" },
        { key: "In", color: "#67C23A" },
        { key: "Out", color: "#ff0" },
        // { key: 'Lock', color: '#303133' },
        { key: "StoreOne", color: "#909399" },
        { key: "StoreTwo", color: "#909399" },
      ],
      // locdialog显示
      locdialog: false,
      //locdialog里的 是否锁定的弹窗
      dialogRemark: false,
      //locdialog里的 是否锁定的弹窗的备注
      remarkData: "",
      //备注是否编辑
      isedit: true,
      // dialog里的信息数据
      locdialogData: {},
      // 判断是否请求数据
      isactive: true,
      // 定时器
      timer: "",
      isfull1: 50,
      isfull: false,
      temp: 1,
      //盘点弹窗
      CheckDialog: false,
      //盘点弹窗的数据
      checkData: {
        shelf: "",
      },
      //级联货架列表
      LocationCascader: [],
      //单选的数据
      radio: 3,
    };
  },
  mounted() {
    InitSvg(this);
    this.timer = setInterval(() => {
      if (this.isactive) {
        this.GetLocInfoData();
      }
    }, 1000);
    setTimeout(() => {
      this.bindSingalRData();
    }, 500);

    //下方功能按钮
    let isFullscreen =
      document.fullscreenElement ||
      document.mozFullScreenElement ||
      document.webkitFullscreenElement ||
      document.fullScreen ||
      document.mozFullScreen ||
      document.webkitIsFullScreen;
    isFullscreen = !!isFullscreen;
    document.addEventListener("fullscreenchange", () => {
      this.isfull = !this.isfull;
    });
    document.addEventListener("mozfullscreenchange", () => {
      this.isfull = !this.isfull;
    });
    document.addEventListener("webkitfullscreenchange", () => {
      this.isfull = !this.isfull;
    });
    document.addEventListener("msfullscreenchange", () => {
      this.isfull = !this.isfull;
    });
  },
  beforeDestroy() {
    this.$signalR.off("WcsMoniorData");
    this.$signalR.offPush("PushModeStatus");
  },
  activated() {
    this.bindSingalRData();
    this.isactive = true;
    console.log("activated");
  },
  deactivated() {
    this.$signalR.off("WcsMoniorData");
    this.$signalR.offPush("PushModeStatus");
    this.isactive = false;
    console.log("deactivated");
  },
  methods: {
    /** 标签切换事件(v-visibility-change="change") */
    change(evt, hidden) {
      // hidden：false切换回当前页面，true切换到别的页面
      console.log(hidden, this.isactive);
      if (hidden) {
        this.$signalR.off("WcsMoniorData");
        this.$signalR.offPush("PushModeStatus");
        clearTimeout(this.timer);
      } else {
        this.timer = setInterval(() => {
          if (this.isactive) {
            this.GetLocInfoData();
          }
        }, 1000);
        this.bindSingalRData();
      }
    },
    /** 绑定后端SingalR数据 */
    bindSingalRData() {
      this.$signalR.on("WcsMoniorData", (data) => {
        const dataObj = JSON.parse(data);
        HandleSingalRData(dataObj);
        // console.log(dataObj,'dataObj');
      });
      this.$signalR.onPush("PushModeStatus", (data) => {
        // console.log('bindSingalRData', data)
      });
    },
    // 获取指定排号的货架信息数据
    async GetLocInfoData() {
      const res = await GetAllLocInfoApi();
      // console.log(res.data);
      this.locInfos = res.data.data;
      // console.log(this.locInfos, "locInfos");
      HandleShelfChanged();
    },
    // 运行
    operateRun(deviceName) {
      HandleDeviceOperate(this, deviceName, 3);
    },
    // 停止
    operateStop(deviceName) {
      HandleDeviceOperate(this, deviceName, 4);
    },
    // 解除异常
    operateRelieve(deviceName) {
      HandleDeviceOperate(this, deviceName, 8);
    },
    // 处理空取
    operateEmpty(deviceName) {
      HandleDeviceOperate(this, deviceName, 6);
    },
    // 处理二重
    operateDouble(deviceName) {
      HandleDeviceOperate(this, deviceName, 6);
    },
    // 详情
    async operateDetails(deviceName) {
      if (!this.particularsclick) {
        const res = await GetDeviceDataApi(deviceName);
        this.particularsData = JSON.parse(res.data.deviceInfo);
        this.particularsclick = true;
      } else {
        this.particularsclick = false;
      }
    },
    //禁用按钮
    disableClick() {
      console.log("禁用按钮");
    },
    // 是否入库出库
    async isBoundClick() {
      alert("未完成需要修改");
      console.log(this.IOPortData, "IOPortData");
      // console.log({ configKey: this.IOPortData.name, configValue: 4 }, '{ configKey: this.IOPortName, configValue: 4 }')
      // if (this.IOPortData.mode) {
      //   const res = await UpdateConfigValueApi({ configKey: this.IOPortData.name, configValue: 4 })
      //   console.log(res)
      // } else {
      //   const res = await UpdateConfigValueApi({ configKey: this.IOPortData.name, configValue: 3 })
      //   console.log(res)
      // }
      // Message.success('操作成功')
    },
    //关闭dialog
    closeDialog() {
      this.disableClickShow = false;
    },
    //关闭locdialog
    closelocdialog() {
      this.locdialog = false;
      this.isedit = true;
    },
    // 改变锁定状态
    changeIslock(data) {
      console.log(data);
      this.$confirm(`是否${data ? "锁定" : "解锁"}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log(this.locdialogData.isLock, "isLock");
          if (this.locdialogData.isLock) {
            this.dialogRemark = true;
            this.remarkData = "";
          } else {
            await UpdateWcsLockApi({
              wcsLocName: this.locdialogData.name,
              locStatus: 0,
              isLock: data ? 1 : 0,
              remark: this.remarkData,
            });
            Message.success("操作成功");
          }
          // console.log(this.locdialogData.name,this.remarkData);
        })
        .catch(() => {
          console.log("取消");
          this.locdialogData.isLock = !data;
        });
    },
    //备注dailog确认按钮
    async dialogRemarkConfirm() {
      console.log(this.remarkData, "this.remarkData");
      const res = await UpdateWcsLockApi({
        wcsLocName: this.locdialogData.name,
        locStatus: 0,
        isLock: this.locdialogData.isLock ? 1 : 0,
        remark: this.remarkData,
      });
      console.log(res);
      this.dialogRemark = false;
      this.locdialog = false;
      Message.success("操作成功");
    },
    //备注dailog取消按钮
    dialogRemarkCancel() {
      this.dialogRemark = false;
      this.locdialogData.isLock = !this.locdialogData.isLock;
    },
    //提交备注按钮
    async submitRemark() {
      const res = await UpdateWcsLockApi({
        wcsLocName: this.locdialogData.name,
        locStatus: 0,
        isLock: this.locdialogData.isLock ? 1 : 0,
        remark: this.remarkData,
      });
      this.isedit = !this.isedit;
      this.locdialog = false;
      Message.success("修改成功");
      this.remarkData = "";
    },
    //编辑备注按钮
    EditRemark() {
      this.isedit = !this.isedit;
      this.remarkData = "";
    },
    //修改基准货架
    changeBasicShelf(data) {
      this.$confirm(`${data ? "确定" : "取消"}为基准货架？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log([
            { wcsLocName: this.locdialogData.name, basicShelf: data },
          ]);
          const res = await UpdateWcsLocationBasicShelfApi([
            {
              wcsLocName: this.locdialogData.name,
              basicShelf: data,
            },
          ]);
          console.log(res);
          Message.success("修改成功");
        })
        .catch(() => {
          console.log("取消");
          this.locdialogData.basicShelf = !data;
        });
    },

    //下方功能按钮
    // 复位
    handleReset() {
      const svg = Snap("#svg");
      svg.zpd(function (_err, paper2) {
        svg.zoomTo(1, 1, mina.linear, function (_err, paper3) {
          svg.panTo(0, 0);
        });
      });
    },
    handleFullscreen() {
      const main = document.getElementById("snap-svg");
      if (this.isfull) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        console.log(main.requestFullscreen);
        if (main.requestFullscreen) {
          main.requestFullscreen();
        } else if (main.mozRequestFullScreen) {
          main.mozRequestFullScreen();
        } else if (main.webkitRequestFullScreen) {
          main.webkitRequestFullScreen();
        } else if (main.msRequestFullscreen) {
          main.msRequestFullscreen();
        }
      }
    },
    handleChange() {
      this.handleFullscreen();
    },
    reduce() {
      this.isfull1 -= 1;
    },
    //打开盘点dialog
    checkClick() {
      this.CheckDialog = true;
      this.GetMachines();
    },
    // 获取设备列表和级联货架列表
    async GetMachines() {
      const LocationCascaderdata = await GetLocationCascaderapi();
      this.LocationCascader = LocationCascaderdata.data.data;
      console.log(this.LocationCascader);
    },
    //有托盘是的盘点
    unitIdCheckClick(){
      this.$confirm(`确认发送该请求嘛？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then( ()=>{

      })
    },
  },
};
</script>

<style lang="scss" scoped>
#svg {
  width: 100%;
  height: 100%;
  background-color: #ddd;
}
</style>

<style scoped>
#card {
  box-shadow: 0 4px 8px 0 #454545;
  background: #fff;
  padding: 6px 6px;
  border-radius: 8px;
  /* position: absolute;
  bottom: 12px; */
  z-index: 999;
  width: 260px;
  position: fixed;
  left: 45%;
  bottom: 10px;
  /* height: 40px; */
}
.demo-svg {
  float: left;
  width: 68px;
  height: 48px;
  /* border-radius: 6px; */
  display: inline-block;
}
.h3NewStyle {
  float: left;
  font-size: 12px;
  color: #2f3033;
  font-weight: 500;
  margin: 0px;
}
.description {
  margin-top: -6px;
  font-size: 12px;
  transform: scale(0.9);
  color: #7e7f8c;
}
</style>
